var bannerSwiper;
var recommendSwiper;
$(function () {
    var channel = getQueryString("channel") || 2;
    $("div[data-channel='" + channel + "']").addClass("active").siblings(".sex-btn").removeClass("active");
    getIndexData(channel);
    getBanner(channel);
    getLikeData(channel);
    getAppConfig(channel,true);

    $(".sex-btn").click(function(){
        bannerSwiper.destroy(false);	//销毁swiper
        recommendSwiper.destroy(false);	//销毁swiper
        $(this).addClass("active").siblings("div").removeClass("active");
        channel = $(this).attr("data-channel");
        getIndexData(channel);
        getBanner(channel);
        getLikeData(channel);
        getAppConfig(channel,false);
    });

    $(".tab-wrapper li").click(function () {
        location.href = $(this).attr("data-url")+"?channel=" + channel;
    });

    $(".bottom-nav-wrapper li").click(function () {
        location.href = $(this).attr("data-url")+"?channel=" + channel;
    });

    $(".like-wrapper .more").click(function () {
        getLikeData(channel);
    });
    
    $(".confirm-btn").click(function () {
        $(".new-sign-wrapper").hide();
    });

    $(".search-wrapper").click(function () {
        location.href = "./pages/search.html?channel=" + channel;
    });
});

function getIndexData(channel) {
    $.ajax({
        type:'post',
        url:BASE_URl + "topic/group?channel=" + channel,
        contentType:"application/json",
        data:JSON.stringify([
            {
                "type": -1,
                "size": 3,
                "format": "full"
            },
            {
                "type": 1,
                "size": 0,
                "format": "normal"
            },
            {
                "type": 2,
                "size": 9,
                "format": "normal"
            },
            {
                "type": 3,
                "size": 3,
                "format": "full"
            }
         ]),
        success:function (data) {
            if(data.success){
                var newData = data.data["-1"];
                var recommendData = data.data["2"];
                var hotData = data.data["3"];
                DrawRecommend(recommendData,channel);
                DrawHotOrNew(hotData,"hot",channel);
                DrawHotOrNew(newData,"new",channel);
            }
        }
    });
}

function getLikeData(channel) {
    $.ajax({
        type:'get',
        url:BASE_URl + "topic/gene?channel="+channel+"&size=6&format=normal",
        success:function (data) {
            if(data.success){
                DrawLike(data.data,channel);
            }
        }
    });
}

function getAppConfig(channel,flag) {
    var url = "";
    if(flag){
        url = "config/index?channel="+channel+"&push="+flag;
    }else{
        url = "config/index?channel="+channel;
    }
    $.ajax({
        type:'get',
        url:BASE_URl + url,
        success:function (data) {
            if(data.success){
                // 是否弹出新手签到
                if(data.data.push_info == "sign_newer"){
                    // 新手签到
                    newSign();
                }
                DrawAppConfig(data.data.app);
                DrawSpecailArea(data.data.shortcut);
            }
        }
    });
}

function newSign() {
    $.ajax({
        type:'get',
        url:BASE_URl + "user/sign/new",
        success:function (data) {
            if(data.success){
                // 新手签到配置请求
                getNewSignConig();
            }
        }
    });
}

function getNewSignConig() {
    $.ajax({
        type:'get',
        url:BASE_URl + "config/sign",
        success:function (data) {
            if(data.success){
                DrawNewSign(data.data.new);
            }
        }
    });
}

function DrawNewSign(data) {
    var list = data.list;
    var html = "";
    $(".new-sign-get .account").html(data.current);
    $(".award-coin").html(list[data.current-1].coin+"币");
    if(list[data.current-1].gift != 0){
        $(".award-gift").html("+"+list[data.current-1].gift+"券");
        $(".award-gift").show();
    }
    for(var i = 0;i < list.length;i ++){
        var hasGift = "";
        var active = data.current > list[i].no ? "active" : "";
        var signed = data.current >= list[i].no ? "signed" : "";
        if(list[i].gift != 0){
            hasGift = `<div class="day-detail has-gift">
                        <i class="day-num pa">${list[i].no}</i>
                        <div class="award-detail pa tc `+signed+`">${list[i].coin}币+${list[i].gift}券</div>
                       </div>`;
        }else{
            hasGift = `<div class="day-detail">
                        <i class="day-num pa">${list[i].no}</i>
                        <div class="award-detail pa tc `+signed+`">${list[i].coin}币</div>
                       </div>`;
        }
        html += `<li class="inline">
                    <div class="day-detail-wrapper pr inline">` + hasGift + `</div>
                    <i class="right-icon inline ` + active + `"></i>
                 </li>`;
    }
    $(".new-sign-content ul").html(html);
    $(".new-sign-wrapper").show();
}

function getBanner(channel) {
    $.ajax({
        type:'get',
        url:BASE_URl + "topic/banner?channel="+channel,
        success:function (data) {
            if(data.success){
                DrawBanner(data.data,channel);
            }
        }
    });
}

function DrawBanner(bannerData,channel) {
    var html = "";
    for (var i = 0;i < bannerData.length;i ++){
        html += `<div class="swiper-slide">
                    <img src="${bannerData[i].image}" alt="${bannerData[i].id}" data-type="${bannerData[i].type}" data-url="${bannerData[i].url}">
                 </div>`;
    }
    $(".banner-wrapper .swiper-wrapper").html(html);
    setTimeout(function () {
        bannerSwiper = new Swiper('.banner-wrapper .swiper-container', {
            autoplay: 3000,//可选选项，自动滑动
            loop : true,
            pagination : '.swiper-pagination',
            paginationClickable :true,
            onTap: function(swiper,e){
                if(e.target.children[0].dataset.type == "book"){
                    location.href = "./pages/detail.html?id=" + e.target.children[0].alt + "&channel=" + channel;
                }else if(e.target.children[0].dataset.type == "url"){
                    location.href = e.target.children[0].dataset.url;
                }
            },
            autoplayDisableOnInteraction:false
        });
    },50);
}

function DrawRecommend(recommendData,channel) {
    var html = "";
    for (var i = 0;i < recommendData.length;i += 3){
        html += `<div class="swiper-slide">
                    <ul>
                        <li class="inline" data-id="${recommendData[i].id}">
                            <div class="recommend-cover"><img src="${recommendData[i].image}" width="100%" height="100%" data-id="${recommendData[i].id}"></div>
                            <p class="recommend-name" data-id="${recommendData[i].id}">${recommendData[i].name}</p>
                        </li>
                        <li class="inline" data-id="${recommendData[i+1].id}">
                            <div class="recommend-cover"><img src="${recommendData[i + 1].image}" width="100%" height="100%" data-id="${recommendData[i+1].id}"></div>
                            <p class="recommend-name" data-id="${recommendData[i+1].id}">${recommendData[i+1].name}</p>
                        </li>
                        <li class="inline" data-id="${recommendData[i+2].id}">
                            <div class="recommend-cover"><img src="${recommendData[i + 2].image}" width="100%" height="100%" data-id="${recommendData[i+2].id}"></div>
                            <p class="recommend-name" data-id="${recommendData[i+2].id}">${recommendData[i+2].name}</p>
                        </li>
                    </ul>
                </div>`;
    }
    $(".recommend-wrapper .swiper-wrapper").html(html);
    setTimeout(function () {
        recommendSwiper = new Swiper('.recommend-wrapper .swiper-container', {
            autoplay: 2000,//可选选项，自动滑动
            loop : true,
            pagination:".recommend-pagination",
            paginationClickable :true,
            onTap: function(swiper,e){
                var id = e.target.dataset.id;
                if(id == undefined){
                    return;
                }else{
                    location.href = "./pages/detail.html?id=" + id + "&channel=" + channel;
                }
            },
        });
    },50);
}

function DrawHotOrNew(data,type,channel) {
    var html = "";
    for (var i = 0;i < data.length;i ++){
        var statusHtml = "";
        if(data[i].status == "连载中"){
            statusHtml = `<span class="status updating">[${data[i].status}]：</span>`
        }else if(data[i].status == "已完结"){
            statusHtml = `<span class="status finish">[${data[i].status}]：</span>`
        }
        html += `<li onclick="goDetail('${data[i].id}',${channel})">
                    <div class="book-cover inline"><img src="${data[i].image}" alt="" width="100%" height="100%"></div>
                    <div class="book-detail inline">
                        <div class="book-name">${data[i].name}</div>
                        <div class="book-desc">
                            ` + statusHtml + `${data[i].desc}
                        </div>
                        <div class="cat-and-click clearfix">
                            <div class="cat-wrapper fl">
                                <span class="border-1px-all">${data[i].cat}</span>
                            </div>
                            <div class="click-wrapper fr">
                                <i class="inline click-icon"></i><span class="inline click">${data[i].clicks}</span>
                            </div>
                        </div>
                    </div>
               </li>`;
    }
    if(type == "hot"){
        $(".hot-content ul").html(html);
    }else if (type == "new"){
        $(".new-content ul").html(html);
    }
}

function DrawLike(likeData,channel) {
    var html = "";
    for (var i = 0;i < likeData.length;i ++){
        html += `<li class="inline" onclick="goDetail('${likeData[i].id}',${channel})">
                        <div class="like-cover"><img src="${likeData[i].image}" width="100%" height="100%"></div>
                        <p class="like-name">${likeData[i].name}</p>
                    </li>`;
    }
    $(".like-content ul").html(html);
}

function DrawAppConfig(data) {
    var day = data.time.split(" ")[0];
    var time = data.time.split(" ")[1];
    var html = `<div class="left-wrapper inline">
                    <p class="p1">欢迎骚扰</p>
                    <p class="p2">精彩不容错过</p>
                    <p class="time-and-qq p3"><span>时间：</span>${day}</p>
                    <p class="time-and-qq p4"><span style="opacity: 0">时间：</span>${time}</p>
                    <p class="time-and-qq"><span>Q Q：</span>${data.qq}</p>
                </div>
                <div class="right-wrapper inline">
                    <p>长按二维码识别</p>
                    <div class="qrcode-wrapper"><img src="${data.image}" alt="" width="100%" height="100%"></div>
                </div>`;
    $(".contact-wrapper").html(html);
}

function DrawSpecailArea(data) {
    for(var i = 0;i < data.length;i ++){
        var name = "";
        if(i != 0){
            name = data[i].name;
        }
        var html = `<div class="title" onclick="goPath('${data[i].path}')">
                        <h2>` + name + `</h2>
                        <p class="desc">${data[i].hint}</p>
                    </div>
                    <div class="cover" onclick="goPath('${data[i].path}')"><img src="${data[i].image}" alt="" width="100%" height="100%"></div>`;
        if(i == 0){
            $(".select-wrapper .left-wrapper").html(html);
        }else if(i == 1){
            $(".select-wrapper .right-wrapper .top-wrapper").html(html);
        }else if(i == 2){
            $(".select-wrapper .right-wrapper .bottom-wrapper").html(html);
        }
    }
}

function goDetail(id,channel) {
    location.href = "./pages/detail.html?id=" + id + "&channel=" + channel;
}

function goPath(path) {
    location.href = path;
}

function goMore(type) {
    location.href = "./pages/list.html?type="+type+"&channel="+getQueryString("channel");
}